<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body{
            text-align: center;
        }
        #myCanvas{
           border: 1px solid;
        }


    </style>
</head>
<body>

<canvas id="myCanvas" width="800" height="400"></canvas>

</body>
<script type="text/javascript">
    window.onload = function () {
        var myCanvas = document.getElementById('myCanvas');
        var painting = myCanvas.getContext('2d');

        //首先，需要使用图片就得由img标签
        var img = new Image();

        var num = 0;
        var speed = 0;

        setInterval(function () {

            num++;
            if(num > 8){
                num = 1;
            };
            console.log(num);
            speed += 20;
            if(speed > 800){
                speed = -150;
            }

            //其次，引入图片路径
            img.src = 'img/q_r'+ num +'.jpg';

            //然后，等图片加载完成后再去设置图片显示
            img.onload = function () {
               painting.clearRect(0,0,myCanvas.width,myCanvas.height)
                //最后，图片显示
                painting.drawImage(img,speed,100,150,85);
            };

        },100);




    }
</script>
</html>